import React,{useState,useEffect} from 'react';
import {Breadcrumb, Link} from 'antd'
import store from '@/redux/store.js'
import { setCrumb } from '@/redux/actions';
import { useLocation } from 'react-router-dom'
import './index.less'

function BreadCrumb(props) {
  let routerData = store.getState().routerData
  const { pathname } = useLocation()
  const getChild = (data) => {
    let current =[]
    let fn = function (data,pathname) {
      for(let i = 0; i < data.length; i++) {
        if(data[i].key == pathname) {
          current.push({
            ...data[i],
            href: data[i].key,
            title: data[i].label,
          })
          break;
          return current;
        }else{
          if(data[i].children!=undefined && data[i].children.length>0){
            fn(data[i].children,pathname)
          }
        }
      }
    }
    fn(data,pathname)
    return current
  }
  const getParent = (data) => {
    let current = []
    routerData.forEach((item)=>{
      if(item.key == data[0].key){
        current.push({
            ...item,
            'children':[],
            href: item.key,
            title: item.label,
          }
        )
      }
    })
    let childData = []
    if(current.length==0){
      routerData.forEach((item)=>{
        if(item.children && item.children.length>0){
          childData = item.children.filter((ele)=>{
            if(ele.key == data[0].key){
              current.push({
                ...item,
                children:[],
                href: item.key,
                title: item.label,
                isShow:true,
              })
              return{
                ...item,
                isShow:true,
              }
            }
          })
        }
        if(childData.length>0){
          let isHas = current.findIndex(item=>item.key == childData[0].key)
          if(isHas < 0){
            current.push({
              ...childData[0],
              href: childData[0].key,
              title: childData[0].label,
              isShow:true,
            })
          }
        }
      })
    }
    return current
  }
  useEffect(()=>{
    if(routerData.length>0){
      let currentData = getChild(routerData)
      let current = []
      if(currentData.length>0 && currentData[0].type == "cache"){
        current = [
          ...store.getState().breadCrumb,
          {
            ...currentData[0],
            href: currentData[0].key,
            title: currentData[0].label,
            isShow:true,
          }
        ]
      }else{
        current = getParent(currentData)
      }
      if(current.length>0){
        store.dispatch(setCrumb(current))
      }
    }
  },[pathname])

  function itemRender(route, params, routes, paths) {
    const last = routes.indexOf(route) === routes.length - 1;
    return last ? (
      <span>{route.title}</span>
    ) : (
      <Link to={route.redirect !== undefined ? route.redirect : route.path}>{route.title}</Link>
    );
  }
  return (
    <>
      <div style={{'display':'flex'}}>
        {
          store.getState().breadCrumb.length>0?<span className="ant-breadcrumb-pre">当前位置：</span>:''
        }
        <Breadcrumb
          separator="/"
          items={[
            ...store.getState().breadCrumb
          ]}
        />
      </div>
    </>
  );
}

export default BreadCrumb;
